<template>
    <div>
        <div class="i_bg" v-if="productsList.length ==0">
           <h1 style="text-align: center;">没有查询到相关商品！</h1>
        </div>
        <div class="i_bg" v-if=" productsList.length > 0">
                <div class="content mar_20">
                    <div class="l_history">
                        <div class="his_t">
                            <span class="fl">收藏夹</span>
                            <!-- <span class="fr"><a href="#">清空</a></span> -->
                        </div>
                        <ul v-if="collects.length !=0">
                            <li v-for="item in collects" :key="item.id">
                                <div class="img"><a ><img :src="'http://192.168.79.98:9001/'+item.fileName" width="185" height="162" /></a></div>
                                <div class="name"><a >{{ item.name }}</a></div>
                                <div class="price">
                                    <font>￥<span>{{ item.price }}</span></font> &nbsp; 
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="l_list">
                        <!-- <table border="0" style="width:100%; margin-bottom:30px; border:1px solid #eaeaea;" cellspacing="0" cellpadding="0">
                        <tr valign="top">
                            <td width="248"><div class="brand_img"><img src="../../../assets/images/brand5.jpg" width="226" height="108" /></div></td>
                            <td class="td_b" style="padding:15px 40px;">
                                所有分类<br />
                                <a v-for="ct in categoryList" :key="ct.id" href="#" :class="{now:ct.id == $store.state.categoryId}">{{ ct.name }}({{ ct.childCategories.length }})</a>
                            </td>
                        </tr>
                        </table> -->
                        <div class="list_t">
                            <span class="fl list_or">
                                <a href="#" class="now">默认</a>
                                <a href="#">
                                    <span class="fl">销量</span>                        
                                    <span class="i_up">销量从低到高显示</span>
                                    <span class="i_down">销量从高到低显示</span>                                                     
                                </a>
                                <a href="#">
                                    <span class="fl">价格</span>                        
                                    <span class="i_up">价格从低到高显示</span>
                                    <span class="i_down">价格从高到低显示</span>     
                                </a>
                                <a href="#">新品</a>
                            </span>
                            <span class="fr">共发现{{productsList.length}}件</span>
                        </div>
                        <div class="list_c">
                            
                            <ul class="cate_list">
                                <li v-for="item in productsList" :key="item.id">
                                    <div class="img"><router-link :to="{name:'GoodsDetail',params:{id:item.id}}"><img :src="'http://192.168.79.98:9001/'+item.fileName" width="210" height="185" /></router-link></div>
                                    <div class="price">
                                        <font>￥<span>{{ item.price }}</span></font> &nbsp; 26R
                                    </div>
                                    <div class="name"><a href="#" v-html="item.name"></a></div>
                                    <div class="carbg">
                                        <a @click="clickCollectIcon(item.id)" class="ss">收藏</a>
                                        <a  class="j_car" @click="addToCart(item.id)">加入购物车</a>
                                    </div>
                                </li>
                            </ul>
                            <span>一共有{{ pageInfo.total }}条数据 {{ pageInfo.pageNum }}/{{ pageInfo.pages }}</span>
                            <div class="pages">
                                <template v-if="pageInfo.pageNum > 1">
                                    <a @click.prevent="pageTool(1,pageInfo.pageSize)" class="p_pre" >首页</a>
                                    <a @click.prevent="pageTool(pageInfo.pageNum-1,pageInfo.pageSize)"  class="p_pre" >上一页</a>
                                </template>
                                
                                <a  class="cur">{{ pageInfo.pageNum }}</a>
                                <template v-if="pageInfo.pageNum < pageInfo.pages">
                                    <a  @click.prevent="pageTool(pageInfo.pageNum+1,pageInfo.pageSize)" class="p_pre" >下一页</a>
                                    <a  @click.prevent="pageTool(pageInfo.pages,pageInfo.pageSize)" class="p_pre">末页</a>
                                </template>
                                
                            </div>
                        </div>
                    </div>
                </div>
        </div>
        <!--Begin 弹出层-收藏成功 Begin-->
        <div id="fade" :class="{'isShow':isShow}" class="black_overlay" ></div>
        <div id="MyDiv" :class="{'isShow':isShow}" class="white_content" >             
            <div class="white_d">
                <div class="notice_t">
                    <span class="fr" style="margin-top:0px; cursor:pointer;"><img @click="isShow = false" src="../../../assets/images/close.gif" /></span>
                </div>
                <div class="notice_c">
                    
                    <table border="0" align="center" style="margin-top:5px;" cellspacing="0" cellpadding="0">
                    <tr valign="top">
                        <td width="40"><img  src="../../../assets/images/suc.png" /></td>
                        <td>
                            <span style="color:#3e3e3e; font-size:18px; font-weight:bold;">您已成功收藏该商品</span><br />
                            <a href="#">管理我的收藏 >></a>
                        </td>
                    </tr>
                    <tr height="50" valign="bottom">
                        <td>&nbsp;</td>
                        <td><a  class="b_sure" @click="isShow = false">确定</a></td>
                    </tr>
                    </table>
                        
                </div>
            </div>
        </div>    
        <!--End 弹出层-收藏成功 End-->

    <!--Begin 弹出层-加入购物车 Begin-->
    <div id="fade1" class="black_overlay" :class="{isShow:addCartInfo}"></div>
    <div id="MyDiv1" class="white_content" :class="{isShow:addCartInfo}">             
        <div class="white_d" >
            <div class="notice_t">
                <span class="fr" style="margin-top:0px; cursor:pointer;"  @click="addCartInfo = false"><img src="../../../assets/images/close.gif" /></span>
            </div>
            <div class="notice_c">
           		
                <table border="0" align="center" style="margin-top:0px;" cellspacing="0" cellpadding="0">
                  <tr valign="top">
                    <td width="40"><img src="../../../assets/images/suc.png" /></td>
                    <td>
                    	<span style="color:#3e3e3e; font-size:18px; font-weight:bold;">宝贝已成功添加到购物车</span><br />
                    	购物车共有{{cartList.length}}种宝贝 &nbsp; &nbsp; 合计：{{totalPrice}}元
                    </td>
                  </tr>
                  <tr height="50" valign="bottom">
                  	<td>&nbsp;</td>
                    <td><router-link to="/cart-one"  class="b_sure">去购物车结算</router-link><a  class="b_buy" @click="addCartInfo = false">继续购物</a></td>
                  </tr>
                </table>
                    
            </div>
        </div>
    </div>    
    <!--End 弹出层-加入购物车 End-->
        <my-footer-1></my-footer-1>
    </div>

</template>

<script>
import MyFooter1 from '@/components/MyFooter1.vue';
import computeNumber from '@/assets/js/computeNumber';
import Heard from '../Heard.vue';
export default {
    name:'GooddsList',
    components:{Heard,MyFooter1},
    data:function(){
        return{
           isShow:false,
           addCartInfo:false
        }
    },
    mounted(){
        if(this.categoryId){
            this.getProductFromEs(1,2,this.categoryId);
        }
        if(this.categoryId==''&&!this.searchName){
            this.getProductFromEs(1,2,"");
        }
        
    },
    computed:{
        totalPrice(){
            return this.cartList.reduce((sum,item)=>{
                let count = item.count;
                let price = item.price;
                if (!isNaN(price) && !isNaN(count)) {
                    return computeNumber(sum, '+', computeNumber(price, '*', count).result).result;
                }
                return sum;
            },0);
        },
        cartList(){
            return this.$store.state.cartList;
        },
        pageInfo(){
            return this.$store.state.pageInfo;
         },
        productsList(){
            return this.$store.state.products;
        },
        searchName(){
            return this.$store.state.searchName;
        },
         categoryId:function(){
            return  this.$store.state.categoryId;
         },
         collects(){
            return this.$store.state.collects;
         }
    },
    methods:{
        //解决精度问题，计算价格
        countNumber(num1,type,num2){
           return computeNumber(num1,type,num2).result;
        },
        getCarts(){
            this.$axios({
                url:'/easybuy/cart/all'
            }).then(rs=>{
                //将购物车数据存放到vuex中
                window.sessionStorage.setItem('cartList',JSON.stringify(rs.data.productVoList));
                this.$store.commit('changeCartList',rs.data.productVoList);
                
            })
        },
        addProducts(productId){
            this.$axios({
                url:'/easybuy/cart/add',
                params:{
                    productId,
                }
            }).then(rs=>{
                if(rs.data.code == 500){
                    this.$message.error('添加失败，服务器错误！');
                }else if(rs.data.code == 200){
                    this.addCartInfo = true;
                    this.getCarts();
                }
            })
        },
        //将商品添加到购物车

        addToCart(productId){
              //校验库存的方法
            this.$axios({
                url:'/easybuy/products/getById',
                params:{
                    id:productId
                }
            }).then(rs=>{
                let stock = rs.data.product.stock;
                let preout = rs.data.product.preout;
                console.log("库存",stock-preout);
                console.log("要购买的数量",this.count);
                if((stock-preout) < 1){
                   this.$message.error('库存不足！');
                }else {
                    this.addProducts(productId);
                }
            })
        },
        //获取收藏夹中的所有商品
        getCollects(){
            this.$axios({
                url:'/easybuy/collect/all',
            }).then(rs=>{
                //将收藏夹中的商品信息存到vuex中
                console.log("collectList:",rs.data.collectList);
                this.$store.commit('changeCollects',rs.data.collectList);
                window.sessionStorage.setItem('collects',JSON.stringify(rs.data.collectList));
            })
        },
        //点击收藏
        clickCollectIcon(productId){
            //判断用户是否登录，如果没登录是不能添加到收藏夹的
            // if(!this.$store.state.loginStatus){
            //     this.$message.error("请先登录");
            //     return;
            // }
            this.$axios({
                url:'/easybuy/collect/add',
                params:{
                    productId
                }
            }).then(rs=>{
                if(rs.data.code == 200){
                     this.isShow = true;
                     this.getCollects();
                }else if(rs.data.code == 5001){
                    this.$message.info("该商品已存在收藏夹中！");
                }else if(rs.data.code == 5002){
                    this.$message.error("最多只能收藏6个商品！");
                }else{
                    this.$message.error("添加失败！");
                }
            })
          
        },
        //查询所有分类及其子级分类
        getAllCategories(){
            this.$axios({
                url:'/easybuy/category/allCategories',
            }).then(rs=>{
                this.$store.commit('changeCategoryList',rs.data.allCategories);
                console.log("查询出来的所有分类:",rs.data.allCategories);
            })
        },

        //翻页工具
        pageTool(pageNum,pageSize){
            this.getProductFromEs(pageNum,pageSize,this.categoryId);
        },
        //从es中获取数据
        getProductFromEs(pageNum,pageSize,categoryId){
            console.log("分类Id为：",categoryId);
            this.$axios({
                url:'/easybuy/products/index',
                params:{
                    pageNum,
                    pageSize,
                    categoryId
                }
            }).then(rs=>{
                console.log("pageInfo",this.pageInfo);
                //将数据放到vuex中
                this.$store.commit('changeProducts',rs.data.pageInfo.list);
                this.$store.commit('changePageInfo',rs.data.pageInfo);
            })
        }    
    }
}
</script>

<style scoped>
    .disable{
        cursor:not-allowed;
    }
    .isShow{
        display: block;
    }
</style>